<template>
	<!-- 20230329 -->
	<view class="image-images-upload-cn">
		<!-- 组件内容 -->
		<view class="cn-content">
			<view class="flex flex-wrap padding-top-20 padding-bottom-5">

				<!-- 上传的图片展示 -->
				<view class="item" v-for="(item,index) in image_list" :key="index" @click="previewImage(index)">
					<image class="jc-image" :src="item" mode="aspectFill"></image>
					<!-- 删除图标 -->
					<text class='del-icon tyIcon-symbol-minus-round-fill text-30 text-main'
						@click.stop="delImage(index)"></text>
				</view>

				<!-- 上传图片框 -->
				<view class="item border-dashed-cc flex align-center justify-center" @click="chooseImage"
					v-if="image_list.length < count">
					<view class="flex flex-direction align-center">
						<text class='tyIcon-image-add line-height-50 text-50 text-aa'></text>
						<text class="line-height-30 text-20 text-aa">
							{{image_list.length ? '还可上传' + (count - image_list.length) + '张' : '上传图片'}}
						</text>
					</view>
				</view>

				<!-- 上传的视频展示 -->
				<view class="item" v-for="(item,index) in video_list" :key="item.video_url">
					<image class="jc-image" :src="item.image_url" mode="aspectFill"></image>
					<!-- 播放按钮 -->
					<text class="play-icon tyIcon-play text-50 text-ff"
						@click="play(item.video_url)"></text>
					<!-- 删除图标 -->
					<text class='del-icon tyIcon-symbol-minus-round-fill text-30 text-main'
						@click.stop="delVideo(index)"></text>

				</view>

				<!-- 上传视频框 -->
				<view class="item border-dashed-cc flex align-center justify-center" @click="chooseVideo"
					v-if="video_list.length < videoCount">
					<view class="flex flex-direction align-center">
						<text class='tyIcon-video-add line-height-50 text-50 text-aa'></text>
						<text class="line-height-30 text-20 text-aa">添加短视频</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 组件浮层 -->
		<view class="cn-layer">
			<ty-layer-pop-up v-if="video_layer_show" @overlayClick="video_layer_show = false">
				<!-- 浮层内容 -->
				<view class="layer-content">
					<video class="width-100p height-100p" :src="video_url" id="video" object-fit='contain' autoplay
						:enable-progress-gesture="false" @ended="stop"></video>
				</view>
			</ty-layer-pop-up>
		</view>
	</view>
</template>

<script>
	import video from '@/components/hzjc/utils/functions/video.js'
	export default {
		data() {
			return {
				image_list: [],
				video_list: [],
				controls: false,
				video_layer_show: false,
				video_url: '',
				videoContext: {}
			}
		},
		props: {
			// 最多上传几个图片
			count: {
				type: Number,
				default: 5
			},
			// 压缩
			sizeType: {
				type: Array,
				default: () => {
					return ['original', 'compressed']
				}
			},
			// 来源
			sourceType: {
				type: Array,
				default: () => {
					return ['album', 'camera']
				}
			},
			// 最多上传X个视频
			videoCount: {
				type: Number,
				default: 1
			},
			// 特殊索引
			index: {
				type: [Number, String],
				default: 0
			},
		},
		created() {
			this.videoContext = uni.createVideoContext('video')
		},
		methods: {
			// 选择图片
			chooseImage() {
				this.image.chooseImageUpload(this.count - this.image_list.length, this.sourceType, this.sizeType).then(
					res => {
						for (let i = 0; i < res.length; i++) {
							this.image_list.push(res[i]);
						}
						this.$emit('imageChange', {
							image_list: this.image_list,
							index: this.index
						});
					})
			},

			//删除图片
			delImage(index) {
				this.image_list.splice(index, 1);
				this.$emit('imageChange', {
					image_list: this.image_list,
					index: this.index
				});
			},

			// 预览图片
			previewImage(index) {
				uni.previewImage({
					current: this.image_list[index],
					urls: this.image_list
				});
			},

			// 选择视频
			chooseVideo() {
				video.chooseVideoUpload(this.sourceType, 15)
					.then(res => {
						for (let i = 0; i < res.length; i++) {
							this.video_list.push(res[i]);
						}
						console.log(this.video_list)
						this.$emit('videoChange', {
							video_list: this.video_list,
							index: this.index
						});
					})
			},

			//删除视频
			delVideo(index) {
				this.video_list.splice(index, 1);
				this.$emit('videoChange', {
					video_list: this.video_list,
					index: this.index
				});
			},

			play(video_url) {
				console.log(video_url)
				this.video_layer_show = true
				this.video_url = video_url
				this.videoContext.play()
			},
			stop() {
				this.video_layer_show = false
				this.videoContext.stop()
			},
		}
	}
</script>

<style scoped>
	/* 上传框 */
	.item {
		position: relative;
		margin-right: 15rpx;
		margin-bottom: 15rpx;
		border-radius: 10rpx;
		width: 160rpx;
		height: 160rpx;
	}

	.item:nth-child(4n) {
		margin-right: 0;
	}
	
	/* 上传框边框 */
	.border-dashed-cc {
		border: 2rpx dashed #ccc;
	}

	/* 图片 */
	.item image {
		width: 160rpx;
		height: 160rpx;
		border-radius: 10rpx;
	}

	/* 删除图标 */
	.del-icon {
		position: absolute;
		right: -5rpx;
		top: -6rpx;
	}

	/* 浮层内容 */
	.layer-content {
		position: fixed;
		left: 0;
		top: calc(10vh);
		width: 100vw;
		height: calc(80vh);
	}

	/* 播放按钮 */
	.play-icon {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}	
</style>